<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>车型查询</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <!--引用百度地图API-->
    <style type="text/css">
        html,body{margin:0;padding:0;}
        .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
        .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <link href="../css/common.css" rel="stylesheet">
    <link href="../dist/layui/css/layui.css" rel="stylesheet">
    <link href="../css/car_rental/select_car.css" rel="stylesheet">

</head>
<body>
<!--=======================================1. 标题================================================-->
<div class="header">
    <div class="head-top">
        <div class="w1180 top-linkbox">
            <div class="top-left">
                <span><a class="size-color" href="">登录</a></span>
                <span>|</span>
                <span><a class="size-color" href="">免费注册</a></span>
                <span>|</span>
                <span><a href="">我的小橘</a></span>
            </div>
            <div class="top-right">
                <span><a href="">帮助中心</a> </span>
                <span>|</span>
                <span><a href="">网址导航</a></span>
                <span>|</span>
                <span><a href="">English</a></span>
                <span>|</span>
                <span>400-888-6608</span>
                <span>|</span>
                <span><a href="">微信</a></span>
            </div>
        </div>
    </div>
    <div class="head-bottom">
        <div class="w1180">
            <a href="" class="logo"></a>
            <div class="nav">
                <ul class="nav-wrap">
                    <li><a href="">首页</a></li>
                    <li><a href="">热门车型</a></li>
                    <li><a href="">车型查询</a></li>
                    <li><a href="">营业网点</a></li>
                    <li><a href="">政企服务</a></li>
                    <li><a href="">接送服务</a></li>
                    <li><a href="">精彩活动</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!--========================2. 内容 ==================================-->
    <div class="content">
        <div class="nav-city-box">
            <p></p>
        </div>
        <!--=======多条件动态查询=========-->
        <div class="choosecartype">
            <!--表单区域-->
            <form action="">
                <div class="term clearfix">
                    <ul class="first">
                        <li>
                            <label class="key">
                                取车门店：
                            </label>
                            <div class="citystore">
                                <input class="citysel input-txt" name="PickUpCity" type="text" value="上海">
                                <input class="mendian input-txt fl"  name="PickUpStoreName" type="text" value="八万人体育场店">
                            </div>
                            <label class="ckb-scsm ">
                                <input class="checkboxin"  name="IsSendService" type="checkbox">
                                <span>送车上门</span>
                            </label>
                        </li>
                        <li>
                            <label class="key">
                                还车门店：
                            </label>
                            <div class="citystore">
                                <input class="citysel input-txt" name="PickUpCity" type="text" value="上海">
                                <input class="mendian input-txt"  name="PickUpStoreName" type="text" value="八万人体育场店">
                            </div>
                            <label class="ckb-scsm ">
                                <input class="checkboxin"  name="IsSendService" type="checkbox">
                                <span>上门取车</span>
                            </label>
                        </li>

                    </ul>
                    <ul class="second">
                        <li>
                            <label class="key">
                                取车时间：
                            </label>
                            <div class="get-time">
                                <input class="car-date input-txt" id="test-limit-one" name="getCarDate" type="text">
                                <input class="car-time input-txt" id="test-limit-three" name="getCarTime" type="text">
                            </div>
                        </li>
                        <li>
                            <label class="key">
                                还车时间：
                            </label>
                            <div class="get-time">
                                <input class="car-date input-txt" id="test-limit-two" name="getCarDate" type="text">
                                <input class="car-time input-txt" id="test-limit-four" name="getCarTime" type="text">
                            </div>
                        </li>
                    </ul>
                    <input class="submit-btn" type="submit" value="查 询">
                </div>
            </form>
            <!--多条件选择区域-->
            <div class="prompt-box clearfix">
                <div class="lease-prompt">
                    *当前选定租金：
                    <span>2</span>
                    天
                </div>
            </div>
            <div class="car-box-body">
                <div class="choose-typebox" id="choose-typebox">
                    <div class="choose-model" id="choose-model">
                        <a href="javascript:void(0)" class="active">
                            <div style="display: none;"><p>全部</p></div></a>
                        <a href="javascript:void(0)">
                            <div class="model-classify">
                                <p>经济型</p>
                                <span class="model-pic2"></span>
                            </div>
                        </a>
                        <a href="javascript:void(0)">
                            <div class="model-classify">
                                <p>舒适型</p>
                                <span class="model-pic3"></span>
                            </div>
                        </a>
                        <a href="javascript:void(0)">
                            <div class="model-classify">
                                <p>精英型</p>
                                <span class="model-pic4"></span>
                            </div>
                        </a>
                        <a href="javascript:void(0)">
                            <div class="model-classify">
                                <p>SUV</p>
                                <span class="model-pic5"></span>
                            </div>
                        </a>
                        <a href="javascript:void(0)">
                            <div class="model-classify">
                                <p>5-15座商务</p>
                                <span class="model-pic6"></span>
                            </div>
                        </a>
                        <a href="javascript:void(0)">
                            <div class="model-classify">
                                <p>电动型</p>
                                <span class="model-pic7"></span>
                            </div>
                        </a>
                        <a href="javascript:void(0)">
                            <div class="model-classify">
                                <p>高端车</p>
                                <span class="model-pic8"></span>
                            </div>
                        </a>
                    </div>
                    <div class="chose-branch">
                        <div class="choose-brand choose-ck">
                            <span>品牌：</span>
                            <div class="brandlist" id="brandlist">
                                <a class="active" href="javascript:void(0)" >全部</a>
                                <a href="javascript:void(0)">雪佛兰</a>
                                <a href="javascript:void(0)">大众</a>
                                <a href="javascript:void(0)">福特</a>
                                <a href="javascript:void(0)">本田</a>
                                <a href="javascript:void(0)">丰田</a>
                                <a href="javascript:void(0)">马自达</a>
                                <a href="javascript:void(0)">吉利</a>
                                <a href="javascript:void(0)">标致</a>
                                <a href="javascript:void(0)">别克</a>
                                <a href="javascript:void(0)">铃木</a>
                                <a href="javascript:void(0)">华晨华颂</a>
                                <a href="javascript:void(0)">雪铁龙</a>
                                <a href="javascript:void(0)">现代</a>
                                <a href="javascript:void(0)">宝马</a>
                                <a href="javascript:void(0)">奇瑞</a>
                                <a href="javascript:void(0)">比亚迪</a>
                                <a href="javascript:void(0)">奥迪</a>
                                <a href="javascript:void(0)">奔驰</a>
                                <a href="javascript:void(0)">长安</a>
                                <a href="javascript:void(0)">东南</a>
                                <a href="javascript:void(0)">福田</a>
                                <a href="javascript:void(0)">汇众</a>
                                <a href="javascript:void(0)">江淮</a>
                                <a href="javascript:void(0)">江铃</a>
                                <a href="javascript:void(0)">金杯</a>
                                <a href="javascript:void(0)">金龙</a>
                                <!--过第二行后的-->
                                <a href="javascript:void(0)">五菱</a>
                                <a href="javascript:void(0)">东风日产</a>


                            </div>
                        </div>
                        <div class="choose-price choose-ck">
                            <span>价格:</span>
                            <div class="pricelist" id="pricelist">
                                <a class="active" href="">全部</a>
                                <a href="javascript:void(0)">100元以下</a>
                                <a href="javascript:void(0)">100-200元</a>
                                <a href="javascript:void(0)">200-300元</a>
                                <a href="javascript:void(0)">300元以上</a>
                            </div>
                        </div>
                        <div class="choose-gear choose-ck">
                            <span>排挡:</span>
                            <div class="grarlist" id="grarlist">
                                <a class="active" href="">全部</a>
                                <a href="javascript:void(0)">手动</a>
                                <a href="javascript:void(0)">自动</a>
                                <a href="javascript:void(0)">无级变速</a>
                                <a href="javascript:void(0)">手自一体</a>
                                <a href="javascript:void(0)">双离合</a>
                            </div>
                        </div>
                        <div class="choose-seat choose-ck">
                            <span>座位</span>
                            <div class="seatlist" id="seatlist">
                                <a class="active" href="javascript:void(0)">全部</a>
                                <a href="javascript:void(0)">2座</a>
                                <a href="javascript:void(0)">4座</a>
                                <a href="javascript:void(0)">5座</a>
                                <a href="javascript:void(0)">7座</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="sort" id="sort">
                    <ul class="field-orderby" id="field-orderby">
                        <li>
                            <a href="javascript:void(0)" class="field-orderby-active">默认排序</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">按租金</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)">按排量</a>
                        </li>
                    </ul>
                    <div class="bottom-right">
                        *共有<span>17</span>种车型可以租用
                    </div>
                </div>
            </div>
        </div>
        <!--======内容右边===========-->
            <div class="step1-body-right">
            <!--百度地图容器-->
            <div style="width:270px;height:270px;border:#ccc solid 1px;" id="dituContent"></div>
            <ul>
                <li>取车门店：</li>
                <li>
                    <h4>八万人体育场店</h4>
                </li>
                <li>
                    <span>上海市徐汇区斜土路2899号甲（光启文化广场内）</span>
                </li>
                <li>
                    <strong>门店电话：<span>021-64160981</span></strong>
                </li>
                <li>
                    <strong>营业时间：<span>08:00-21:00</span></strong>
                </li>
            </ul>
        </div>
        <div class="det-carlist" >
            <ul>
                <li class="licar-picbox">
                    <div class="licar-picinfo">
                        <img src="../images/car-01-images.png">
                    </div>
                    <div class="licar-namebox">
                        <p class="car-nameinfo"><span>丰田雪凌</span></p>
                        <p class="car-introinfo">
                            <span>
                                自动
                            </span>
                            <span>|</span>
                            <span>1.2</span>
                            <span>T</span>
                            <a href="javascript:void(0)" class="show-car-detail">车辆详情</a>
                        </p>
                    </div>
                    <div class="licar-info">
                        <p class="condition1">
                            <span class="carprice">
                                <i class="symbol">￥</i>
                                <em class="total-price">293</em>/日均
                            </span>
                            <span class="licar-btn">
                                <a href="">预订</a>
                            </span>
                        </p>
                    </div>
                </li>
            </ul>
        </div>
        <div class="car-page" id="demo1"></div>

        <!--============================汽车详情框=============================-->
        <div class="show-car-hide"></div>
<!--        <div class="myshowbox">-->
<!--        其实一开始给它来个空的myshowbox然后给它填充内容-->
<!--            <div class="myshowbox-container">-->
<!--                <a href="javascript:void(0)" class="btn-close"><span></span></a>-->
<!--                <div class="div-myshowbox" style="width: 940px; height: 600px;">-->
<!--                    <div class="common-modalBox">-->
<!--                        <div class="current-carname">-->
<!--                            <h3>大众朗逸</h3>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="current-carbox">-->
<!--                        <div class="current-carlist">-->
<!--                            <div class="current-carinfo">-->

<!--                                <div class="current-carpic">-->
<!--                                    <img src="../images/red-car1.png" alt="">-->
<!--                                    <span class="video-playbtn video-li" data-cartypeids="421" id="carInfoVideo"></span>-->
<!--                                </div>-->
<!--                                <p>大众朗逸</p>-->
<!--                            </div>-->
<!--                            <ul class="current-carconfigure clear_float">-->
<!--                                <li id="li-first-child">-->
<!--                                    <p class="configure-name"><span class="configure-icon">-->
<!--                                    <img src="../images/car-shift.png" alt=""></span></p>-->
<!--                                    <p>变速箱:<span>自动</span></p>-->
<!--                                </li>-->
<!--                                <li>-->
<!--                                    <p class="configure-name"><span class="configure-icon"><img src="../images/car-tank-capacity.png" alt=""></span></p>-->
<!--                                    <p>油箱容量:<span>55</span></p>-->
<!--                                </li>-->
<!--                                <li>-->
<!--                                    <p class="configure-name"><span class="configure-icon"><img src="../images/car-displacement.png" alt=""></span></p>-->
<!--                                    <p>排量:<span>1.6</span>L</p>-->
<!--                                </li>-->
<!--                                <li>-->
<!--                                    <p class="configure-name"><span class="configure-icon"><img src="../images/car-seat-number.png" alt=""></span></p>-->
<!--                                    <p>座位数:<span>5</span></p>-->
<!--                                </li>-->
<!--                                <li>-->
<!--                                    <p class="configure-name"><span class="configure-icon"><img src="../images/car-air-inlet-mode.png" alt=""></span></p>-->
<!--                                    <p>进气:<span>自然吸气</span></p>-->
<!--                                </li>-->
<!--                            </ul>-->
<!--                        </div>-->

<!--                    </div>-->
<!--                    <div class="current-carintro">-->
<!--                        <h3>车辆颜色说明</h3>-->
<!--                        <p>车辆颜色请以门店为准，图片仅为车型示意图。</p>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->

    </div>

<!--底部-->
<div class="footer">
    <div class="footer-box clear_float">
        <div class="footer-left">
            <p>
                <a href="" >关于一嗨</a>
                |
                <a href="" >移动客户端</a>
                |
                <a href="" >帮助中心</a>
                |
                <a href="" >建议专区</a>
                |
                <a href="" >联系我们</a>
                |
                <a href="" >友情链接</a>
                | &nbsp;投诉通道：400-821-1608 &nbsp;
            </p>
            <p>
                Copyright © 2007 - 2021 上海一嗨信息技术服务有限公司
                <a href="" >ICP证：沪B2-20140130</a>
            </p>
        </div>
        <div class="footer-right">
            <a href="">
                <img src="../images/footer_right_first.png">
            </a>
            <a href="">
                <img src="../images/footer_right_second.png">
            </a>
            <a href="">
                <img src="../images/footer_right_third.png">
            </a>
            <a href="">
                <img src="../images/footer_right_forth.png">
            </a>
        </div>
    </div>
</div>

<script src="../dist/layui/layui.js"></script>
<script src="../js/car_rental/select_car.js"></script>


</body>
<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
    }

    //创建地图函数：
    function createMap(){
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point(121.435445,31.198777);//定义一个中心点坐标
        map.centerAndZoom(point,18);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
    }

    //地图事件设置函数：
    function setMapEvent(){
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }

    //地图控件添加函数：
    function addMapControl(){
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
        map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
        var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
        map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
        map.addControl(ctrl_sca);
    }


    initMap();//创建和初始化地图
</script>
</html>